<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/scroll.css">
    <link rel="stylesheet" href="css/histor.css">
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/date.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
          integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
          crossorigin=""/>
    <!-- <link rel="stylesheet" href="css/info.css"> -->
    <script src="js/shipei.js"></script>

    <script src="js/echarts.min.js"></script>
    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
            integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
            crossorigin=""></script>
</head>

<body>
    <div class="bg">
        <!-- 顶部 -->
        <div class="header">
            <span class="header-title">道路拥堵状况</span>
            <span class="header-text">监控预警平台</span>
        </div>
        <!-- 内容 -->
        <div class="wrap">
            <!-- 左侧 -->
            <div class="left fl">
                <div class="left-header">
                    <span>时段拥堵等级</span>
                    <div id="left-header-nong" style="width: 100%;height: 100%;" class="left-header-nong"></div>
                </div>
                <div class="left-mid">
                    <span>今日拥堵统计</span>
                    <div id="left-mid-nong" style="width: 100%;height: 100%;" class="left-header-nong"></div>
                </div>
                <div class="left-bottom">
                    <span>车速流量记录</span>
                    <div id="left-bottom-nong" style="width: 100%;height: 100%;" class="left-header-nong"></div>
                </div>
            </div>
            <!-- 中间 -->
            <div class="center fl">
                <!-- 地图 -->
                <div class="center-map">
                    <div id="allmap" style="width:100%;height:100%;"></div>
                </div>
                <!-- 离线清单 -->
                <div class="center-offline">
                    <div class="center-offline-header">
                        <p>观测道路清单</p>
                    </div>
                    <div class="center-offline-mid">
                        <div class="title">
                            <div class="sit sit-title fl">编号</div>
                            <div class="sit sit-title fl">道路</div>
                            <div class="sit sit-title fl">拥堵等级</div>
                            <div class="sit sit-title fl">车速</div>
                        </div>
                        <!-- 自动滚动清单列表 -->
                        <div class="list" id="list">
                            <div class="rowup" id="rowup">
                                <ul class="list-item">
                                    <li class="fl sit-item">L0044</li>
                                    <li class="fl sit-item">文化西路</li>
                                    <li class="fl sit-item">2</li>
                                    <li class="fl sit-item">62km/h</li>
                                </ul>
                                <ul class="list-item">
                                    <li class="fl sit-item">L0032</li>
                                    <li class="fl sit-item">北京南路</li>
                                    <li class="fl sit-item">4</li>
                                    <li class="fl sit-item">21km/h</li>
                                </ul>
                                <ul class="list-item">
                                    <li class="fl sit-item">L0084</li>
                                    <li class="fl sit-item">中坪西路</li>
                                    <li class="fl sit-item">3</li>
                                    <li class="fl sit-item">33km/h</li>
                                </ul>
                                <ul class="list-item">
                                    <li class="fl sit-item">L0056</li>
                                    <li class="fl sit-item">解放东路</li>
                                    <li class="fl sit-item">5</li>
                                    <li class="fl sit-item">15km/h</li>
                                </ul>
                                <ul class="list-item">
                                    <li class="fl sit-item">L0021</li>
                                    <li class="fl sit-item">人民北路</li>
                                    <li class="fl sit-item">1</li>
                                    <li class="fl sit-item">70km/h</li>
                                </ul>
                                <ul class="list-item">
                                    <li class="fl sit-item">L0078</li>
                                    <li class="fl sit-item">中山中路</li>
                                    <li class="fl sit-item">3</li>
                                    <li class="fl sit-item">35km/h</li>
                                </ul>
                                <ul class="list-item">
                                    <li class="fl sit-item">L0093</li>
                                    <li class="fl sit-item">和平西路</li>
                                    <li class="fl sit-item">4</li>
                                    <li class="fl sit-item">20km/h</li>
                                </ul>
                                <ul class="list-item">
                                    <li class="fl sit-item">L0012</li>
                                    <li class="fl sit-item">胜利南路</li>
                                    <li class="fl sit-item">2</li>
                                    <li class="fl sit-item">60km/h</li>
                                </ul>
                            </div>
                            <div class="rowupcope" id="rowupcope"></div>
                        </div>
                    </div>

                    <div class="center-offline-bottom">
                        <p>新疆大学数学与系统科学学院</p>
                    </div>
                </div>
            </div>
            <!-- 右侧 -->
            <div class="right fr">
                <span class="right-title">道路详情</span>
                <div class="right-top">
                    <div class="right-top-content">
                        <span class="name">路名:</span>
                        <span class="text">南公园西路</span>
                    </div>
                    <div class="right-top-content">
                        <span class="name">编号:</span>
                        <span class="text">LO103</span>
                    </div>
                    <div class="right-top-content">
                        <span class="name">地址:</span>
                        <span class="text">青宁南路与长宁路路段</span>
                    </div>
                    <div class="right-top-content">
                        <span class="name">今日温度:</span>
                        <span class="text">17℃</span>
                    </div>
                    <div class="right-top-content">
                        <span class="name">当前车速:</span>
                        <span class="text">111</span>
                    </div>
                    <div class="right-top-content">
                        <span class="name">当前车流量:</span>
                        <span class="text">111</span>
                    </div>
                </div>
                <div class="right-mid">
                    <div class="right-mid-header">
                        5分钟 预测数据
                    </div>
                    <div class="right-mid-scroll">
                        <div class="right-mid-content">

                            <div class="right-top-content">
                                <span class="name">更新时间:</span>
                                <span class="text">111</span>
                            </div>
                            <div class="right-top-content">
                                <span class="name">预测车速:</span>
                                <span class="text">111</span>
                            </div>
                            <div class="right-top-content">
                                <span class="name">预测流量:</span>
                                <span class="text">111</span>
                            </div>
                            <div class="right-top-content">
                                <span class="name">拥堵等级:</span>
                                <span class="text">1</span>
                            </div>
                            
                        </div>
                    </div>
                    <a href="javascript:;" class="history" id="triggerBtn">查看历史记录</a>
                </div>
                <div class="right-bottom">
                    <div class="right-mid-header">
                        实时监控
                    </div>
                    <div class="right-bottom-content">
                        <video 
                            src="./img/jiankong.mp4" 
                            autoplay 
                            loop 
                            muted
                            playsinline 
                            webkit-playsinline 
                        >
                            <!-- 添加备用格式支持 -->
                            <source src="./img/jiankong.mp4" type="video/mp4">
                            您的浏览器不支持视频播放
                        </video>
                    </div>
                    <a href="javascript:;" class="history-pic" id="triggerBtnpic">查看历史图片</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 模态框历史数据 -->

    <div id="myModal" class="modal">
        <div class="modal-content">
            <div class="model-header">查看历史记录</div>
            <div class="see">
                <div class="from fl">
                    <div class="line fl">
                        <span>站名：</span>
                        <select name="name" id="" class="line-content">
                            <option value="南公园西路">南公园西路</option>
                            <option value="文化西路">文化西路</option>
                            <option value="北京南路">北京南路</option>
                            <option value="中坪西路">中坪西路</option>
                        </select>
                    </div>
                    
                    <div class="line fl">
                        <span>开始时间:</span>
                        <input type="text" name="date" id="date" lay-verify="date" placeholder="" autocomplete="off"
                            class="line-content" />
                    </div>
                    <div class="line fl">
                        <span>结束时间:</span>
                        <input type="text" name="date" id="date1" lay-verify="date" placeholder="" autocomplete="off"
                            class="line-content" />
                    </div>
                </div>
                <div class="see-right fr">
                    <div class="submit fr">
                        <input type="button" class="button" value="导出">
                    </div>
                    <div class="submit fr query">
                        <input type="button" class="button" value="查询">
                    </div>
                </div>
            </div>
            <div class="date">
                <div class="date-content" id="date-content-wrap" style="position: relative;">
                    <div id="data-content-line" style="width: 100%;height: 100%;" class="data-content-line"></div>
                </div>
            </div>

            <div id="closeBtn" class="close">X</div>
        </div>
    </div>
    <!-- 模态框历史图片 -->
    <div id="myModalpic" class="modalpic">
        <div class="modal-content">
            <div class="model-header">查看历史图片</div>
            <div class="see">
                <div class="from fl">
                    <div class="line fl">
                        <span>站名：</span>
                        <select name="name" id="" class="line-content">
                            <option value="南公园西路">南公园西路</option>
                            <option value="文化西路">文化西路</option>
                            <option value="北京南路">北京南路</option>
                            <option value="中坪西路">中坪西路</option>
                        </select>
                    </div>
                    
                    <div class="line fl">
                        <span>开始时间:</span>
                        <input type="text" name="date" id="date2" lay-verify="date" placeholder="" autocomplete="off"
                            class="line-content" />
                    </div>
                    <div class="line fl">
                        <span>结束时间:</span>
                        <input type="text" name="date" id="date3" lay-verify="date" placeholder="" autocomplete="off"
                            class="line-content" />
                    </div>
                </div>
                <div class="see-right fr">
                    <div class="submit fr querypic">
                        <input type="button" class="button" value="查询">
                    </div>
                </div>
            </div>
            <!-- 历史图片 -->
            <div class="date">
                <div class="data-contentpic">
                </div>
            </div>

            <div id="closeBtnpic" class="close">X</div>
        </div>
    </div>
    </div>
</body>
<script src="js/jquery.js"></script>
<script src="js/congestion.js"></script>
<script src="js/rankcount.js"></script>
<script src="js/pinhuan.js"></script>
<script src="js/map.js"></script>
<script src="js/histroy.js"></script>
<script src="js/histroyline.js"></script>
<script src="layui/layui.js"></script>
<script src="js/date.js"></script>
<script src="js/gundong.js"></script>
<script src="js/current_data.js"></script>
<script src="js/pre_data.js"></script>

</html>